<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>通知管理</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- favicon
		============================================ -->
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
    <!-- Google Fonts
		============================================ -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900" rel="stylesheet">
    <!-- Bootstrap CSS
		============================================ -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- Lobibox CSS
        ============================================ -->
    <link rel="stylesheet" href="css/notifications/Lobibox.min.css">

    <!-- Bootstrap CSS
		============================================ -->
    <link rel="stylesheet" href="css/font-awesome.min.css">


    <!-- DatetimePicker CSS
        ============================================ -->
    <link rel="stylesheet" href="css/datetimepicker/bootstrap-datetimepicker.min.css">

    <!-- owl.carousel CSS
		============================================ -->
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/owl.theme.css">
    <link rel="stylesheet" href="css/owl.transitions.css">
    <!-- animate CSS
		============================================ -->
    <link rel="stylesheet" href="css/animate.css">
    <!-- normalize CSS
		============================================ -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- meanmenu icon CSS
		============================================ -->
    <link rel="stylesheet" href="css/meanmenu.min.css">
    <!-- main CSS
		============================================ -->
    <link rel="stylesheet" href="css/main.css">
    <!-- educate icon CSS
		============================================ -->
    <link rel="stylesheet" href="css/educate-custon-icon.css">
    <!-- morrisjs CSS
		============================================ -->
    <link rel="stylesheet" href="css/morrisjs/morris.css">
    <!-- mCustomScrollbar CSS
		============================================ -->
    <link rel="stylesheet" href="css/scrollbar/jquery.mCustomScrollbar.min.css">
    <!-- metisMenu CSS
		============================================ -->
    <link rel="stylesheet" href="css/metisMenu/metisMenu.min.css">
    <link rel="stylesheet" href="css/metisMenu/metisMenu-vertical.css">
    <!-- calendar CSS
		============================================ -->
    <link rel="stylesheet" href="css/calendar/fullcalendar.min.css">
    <link rel="stylesheet" href="css/calendar/fullcalendar.print.min.css">

    <!-- form CSS
		============================================ -->
    <link rel="stylesheet" href="css/form/all-type-forms.css">

    <!-- style CSS
		============================================ -->
    <link rel="stylesheet" href="css/style.css">
    <!-- responsive CSS
		============================================ -->
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="stylesheet" href="css/notifications/Lobibox.min.css">
    <!-- modernizr JS
		============================================ -->
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>

    <!-- jquery
============================================ -->
    <script src="js/jquery.min.js"></script>

    <!-- bootstrap JS
    ============================================ -->
    <script src="js/bootstrap.min.js"></script>
    <!-- wow JS  动画效果js
    ============================================ -->
    <script src="js/wow.min.js"></script>
    <!-- price-slider JS
    ============================================ -->
    <script src="js/jquery-price-slider.js"></script>
    <!-- meanmenu JS
    ============================================ -->
    <script src="js/jquery.meanmenu.js"></script>
    <!-- owl.carousel JS
    ============================================ -->
    <script src="js/owl.carousel.min.js"></script>
    <!-- sticky JS
    ============================================ -->
    <script src="js/jquery.sticky.js"></script>
    <!-- scrollUp JS
    ============================================ -->
    <script src="js/jquery.scrollUp.min.js"></script>
    <!-- counterup JS
    ============================================ -->
    <script src="js/counterup/jquery.counterup.min.js"></script>
    <script src="js/counterup/waypoints.min.js"></script>
    <script src="js/counterup/counterup-active.js"></script>
    <!-- mCustomScrollbar JS
    ============================================ -->
    <script src="js/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="js/scrollbar/mCustomScrollbar-active.js"></script>
    <!-- metisMenu JS
    ============================================ -->
    <script src="js/metisMenu/metisMenu.min.js"></script>
    <script src="js/metisMenu/metisMenu-active.js"></script>


    <script src="js/sparkline/jquery.sparkline.min.js"></script>
    <script src="js/sparkline/jquery.charts-sparkline.js"></script>
    <script src="js/sparkline/sparkline-active.js"></script>
    <!-- calendar JS
    ============================================ -->
    <script src="js/calendar/moment.min.js"></script>

    <script src="js/calendar/fullcalendar.min.js"></script>
    <script src="js/calendar/fullcalendar-active.js"></script>
    <!-- plugins JS
    ============================================ -->
    <script src="js/plugins.js"></script>
    <!-- main JS
    ============================================ -->
    <script src="js/main.js"></script>

    <!-- tawk chat JS  聊天系统js
    <script src="js/tawk-chat.js"></script>
    ============================================ -->

    <script src="js/data-table/bootstrap-table.js"></script>
    <script src="js/data-table/bootstrap-table-zh-CN.js"></script>

    <script src="js/notifications/Lobibox.js"></script>

    <script src="js/datepicker/bootstrap-datetimepicker.min.js"></script>
    <script src="js/datepicker/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="js/jquery.validate.min.js" type="application/javascript"></script>
    <script src="localization/messages_zh.min.js"></script>
    <script src="js/my/meValidate.js"></script>
    <script src="js/my/logOut.js"></script>
    <script src="js/my/headImgAndName.js"></script>
    <script src="js/tinymce/tinymce.min.js"></script>
    <script src="js/tinymce/zh_CN.js"></script>
    <script src="js/notifications/Lobibox.js"></script>
    <script src="js/vue.js"></script>
    <style>
        .pagination {
            margin-top: 0;
            margin-bottom: 0;
        }
        .table>tbody>tr>td {
            text-align: center;
        }

        .bootstrap-table .table thead>tr>th {
            text-align: center;
        }

        .table thead {
            background: #ebeaea;
        }
        #notifyMenu li {
            text-align: center;
            width: 100%;border-bottom: 1px gainsboro solid
        }

    </style>
</head>

<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Start Left menu area -->
<div class="left-sidebar-pro">
    <nav id="sidebar" class="">
        <div class="sidebar-header">
            <a href="index.html"><img class="main-logo" src="img/logo/logo.png" alt="" /></a>
            <strong><a href="index.html"><img src="img/logo/logosn.png" alt="" /></a></strong>
        </div>
        <div class="left-custom-menu-adp-wrap comment-scrollbar">
            <nav class="sidebar-nav left-sidebar-menu-pro">
                <ul class="metismenu" id="menu1">
                    <li class="active">
                        <a class="has-arrow" href="index.html">
                            <span class="fa fa-id-card"></span>
                            <span class="mini-click-non">用户信息</span>
                        </a>
                        <ul class="submenu-angle" aria-expanded="true">
                            <li><a href="index.html"><span class="mini-sub-pro">用户列表</span></a></li>
                            <li><a href="goodsManager.html"><span class="mini-sub-pro">商品列表</span></a></li>
                            <li><a href="order.html"><span class="mini-sub-pro">订单管理</span></a></li>
                            <li><a href="classify.html"><span class="mini-sub-pro">类目管理</span></a></li>
                            <li><a href="sc.html"><span class="mini-sub-pro">客户服务</span></a></li>
                            <li><a href=""><span class="mini-sub-pro">通知管理</span></a></li>
                        </ul>
                    </li>
                    <li>
                        <a title="Landing Page" href="adminUser.html" aria-expanded="false"><span class="fa fa-user-circle-o" aria-hidden="true"></span> <span class="mini-click-non">系统用户</span></a>
                    </li>
                </ul>
            </nav>
        </div>
    </nav>
</div>
<!-- End Left menu area -->
<!-- Start Welcome area -->
<div class="all-content-wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="logo-pro">
                    <a href="index.html"><img class="main-logo" src="img/logo/logo.png" alt="" /></a>
                </div>
            </div>
        </div>
    </div>
    <div class="header-advance-area">
        <div class="header-top-area">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="header-top-wraper">
                            <div class="row">
                                <div class="col-lg-1 col-md-0 col-sm-1 col-xs-12">
                                    <div class="menu-switcher-pro">
                                        <button type="button" id="sidebarCollapse" class="btn bar-button-pro header-drl-controller-btn btn-info navbar-btn">
                                            <i class="fa fa-bars"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 col-lg-offset-6 col-md-offse-7 col-sm-offse-6 col-xs-offse-12">
                                    <div class="header-right-info">
                                        <ul class="nav navbar-nav mai-top-nav header-right-menu">
                                            <li class="nav-item dropdown">
                                            </li>
                                            <li class="nav-item">
                                                <div class="dropdown" id="notifyMenu">
                                                    <button type="button" class="btn btn-danger dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
                                                        <i class="fa fa-bell" aria-hidden="true"></i>
                                                        <span class="badge" id="unreadNotify">0</span>
                                                        <span class="caret"></span>
                                                    </button>
                                                    <ul class="dropdown-menu"  aria-labelledby="dropdownMenu1" v-if="notifyData.length>0">
                                                        <!--消息列表-->
                                                        <li  v-for="notify in notifyData"  >
                                                            <a href="javascript:void(0)" v-on:click="fn($event)" :value="notify.path" :nid="notify.nid">
                                                                <div class="notification-content">
                                                                    <span class="bg-info" >{{notify.updateTime}}</span>
                                                                    <h5 style="margin-top: 10px">{{notify.title}}</h5>
                                                                    <p>点击查看详细信息</p>
                                                                </div>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                    <ul class="dropdown-menu"  id="" aria-labelledby="dropdownMenu1" v-else>
                                                        <li>
                                                            <span style="font-size: 10px;color: darkgrey">暂无新的通知</span>
                                                        </li>
                                                        <li>
                                                            <a href="notification.html">查看所有通知</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="nav-item">
                                                <a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
                                                   class="nav-link dropdown-toggle">
                                                    <img id="headImgs" src="img/product/pro4.jpg" alt=""
                                                         style="width: 26px;height: 26px;border-radius: 100%"/>
                                                    <span class="admin-name" id="headName">欢迎你，xxx</span>
                                                    <i class="fa fa-angle-down edu-icon edu-down-arrow"></i>
                                                </a>
                                                <ul role="menu"
                                                    class="dropdown-header-top author-log dropdown-menu animated zoomIn">

                                                    <li><a onclick="logOut()"><span
                                                            class="edu-icon edu-locked author-log-ic"
                                                            style="cursor:pointer"></span>登出</a>
                                                    </li>
                                                </ul>
                                            </li>

                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <button class="btn btn-danger" style="margin: 20px" data-toggle="modal" data-target="#myModal">发布新通知</button>
            <table id="notifyContent" class="table table-striped" ></table>
        </div>
        <div class="modal fade bs-example-modal-lg" id="myModal"  data-backdrop="static"  role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title">编辑通知</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label for="notifyTitle" class="col-sm-2 control-label">通知标题:</label>
                                <div class="col-sm-10">
                                    <input class="form-control" type="text" id="notifyTitle">
                                </div>

                            </div>
                            <textarea id="notifyTextarea"></textarea>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                        <button class="btn btn-primary" type="button" onclick="addNewNotify()">提交</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
    </div>
</div>
</div>
</body>
<script src="customjs/eventSourcesNotify.js"></script>
<script>

    $('#notifyContent').bootstrapTable({
        url:'http://localhost:8080/posterior_system_war_exploded/notify?uid='+uid,             //请求后台的URL（*）
        method: 'get',                      //请求方式（*）
        striped: true,                      //是否显示行间隔色
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,                   //是否显示分页（*）
        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
        pageNumber:1,                       //初始化加载第一页，默认第一页
        pageSize: 10,                       //每页的记录行数（*）
        pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
        onLoadSuccess: function (row) {
            //调用改变颜色的方法
            getTdValue(row);
            //改变未读通知方法
            unreadNotifyBell(row);
        },
        //{"total":3,"rows":
        // [{"publisher":"000000","title":"关于国庆放假的通知","path":"tinymec.html","createTime":"2020-07-02 10:28:24","updateTime":"2020-07-02 10:28:27","status":"false"}
        columns: [
            {
                field:'publisher',
                title:'发布者',
            },{
                field:'title',
                title:'通知标题',
            },
            {
                field:'createTime',
                title:'创建日期',
            },
            {
                field:'updateTime',
                title:'更新日期',
            },
            {
                field:'path',
                title:'通知详情',
                formatter:notifyConten
            },
            {
                field:'status',
                title:'状态',
                formatter:changeStatus
            },

        ],                     //列设置
    });
    //富文本编辑器配置

    tinymce.init({
        selector: '#notifyTextarea',
        width: 870,
        height: 450,
        language:'zh_CN',
        plugins: 'image',
        toolbar: 'image',
        images_upload_url: 'http://localhost:8080/posterior_system_war_exploded/notify/uploadImg',
        setup: function(editor){
            editor.on('change',function(){ editor.save(); });
        }
    });
    //发布新通知
    function addNewNotify() {
        //1.上传文件,把input的值封装成html文件,并返回文本文件路径
        var notifyContent =  $('#notifyTextarea').val();
        var notifyTitle = $('#notifyTitle').val();
        if (notifyContent==null||notifyContent.trim()==''||notifyTitle==null||notifyTitle.trim()=='') {
            showWarning("标题或内容不能为空");
            return
        }
        var textPath = '';
        $.ajax({
            url:"http://localhost:8080/posterior_system_war_exploded//notify/uploadNotifyFile",
            type:'post',
            dataType:'json',
            async: false,
            data:{notifyContent:notifyContent},
            success:function (_data) {
                //成功后返回路径,并关闭模态框
                textPath =_data.textPath;
                console.log(1111,textPath)
                //tinyMCE内容的清空
                tinyMCE.activeEditor.setContent('');
                var notifyTitle = $('#notifyTitle').val('');
                $('#myModal').modal('hide')

                //失败的情况返回错误信息
            }
        })
        //2.插入通知表新的记录
       /* http://localhost:8080/posterior_system_war_exploded/notify/addNotify*/
        //Integer uid, String title, String path
        //3.后端发送通知
        $.ajax({
            url:"http://localhost:8080/posterior_system_war_exploded/notify/addNotify",
            type:'post',
            async: false,
            dataType:'json',
            data:{uid:uid,title:notifyTitle,path:textPath},
            success:function (_data) {
                //成功的话刷新table
                $('#notifyContent').bootstrapTable('refresh')

                //失败的情况返回错误信息
            }
        })

    }


    //根据状态换色
    function getTdValue(row) {
        var tableId = document.getElementById("notifyContent");

        var y = 0;
        for (var i = 0; i < row.rows.length; i++) {
            //将已标记的数据改变背景颜色
            y++;
            //未读标记
            if (row.rows[i].status == "true") {
                tableId.rows[y].setAttribute("style", "background-color:#00E3AA");
            }
        }
    }

    //查看通知
    function notifyConten(value, row) {
        var nid = row.nid;
        return '<button class="btn btn-default" onclick="seeNotify(\''+value + '\','+nid+')" >点击查看</button>'
    }
    //查看和改变已读状态
    function changeStatus(value, row) {
        if(value=='true'){
            return '<span class="label label-success">未读</span>'
        }else{
            return '<span class="label label-primary">已读</span>'
        }
    }
    //查看通知（跳转页面，改变已读状态）
    function seeNotify(value,nid) {
        seeNotifyMethod(value,nid)
        $('#notifyContent').bootstrapTable('refresh');
    }


    //展示错误信息提示框
    function showWarning(msg) {
            Lobibox.notify('error', { width:$(window).width()/5,
                delay: 2000,
                size: 'mini',
                title: '失败',
                position: 'bottom right',
                showClass: 'fadeInDown',
                hideClass: 'fadeUpDown',
                msg:msg
            });
    }
</script>
</html>

